/**
 * Created by plter on 2016/11/17.
 */

(function () {


    var canvas, context, rectX = 0, rectSpeed = 1;

    function createCanvas() {
        canvas = document.createElement("canvas");
        canvas.width = 400;
        canvas.height = 300;
        document.body.appendChild(canvas);

        context = canvas.getContext("2d");
    }


    function drawRect() {
        rectX += rectSpeed;

        context.save();
        context.fillStyle = "red";
        context.translate(rectX, 0);
        context.fillRect(0, 0, 100, 100);
        context.restore();
    }

    function render() {

        context.clearRect(0, 0, canvas.width, canvas.height);
        drawRect();

        requestAnimationFrame(render);
    }

    // function startAnim() {
    //
    //     var x = 0;
    //     var speed = 1;
    //
    //     setInterval(function () {
    //         context.clearRect(0, 0, canvas.width, canvas.height);
    //         context.fillStyle = "red";
    //         context.fillRect(x, 0, 100, 100);
    //         x += speed;
    //     }, 20);
    // }


    function init() {
        createCanvas();
        // startAnim();
        render();
    }

    init();

})();